<template>
  <view class="wrapper">
    <view class="title">{{ notice.source }}</view>
    <view class="time">{{ notice.createTime }}</view>
    <view class="content">
      <rich-text :nodes="notice.content" space="nbsp" />
    </view>
  </view>
</template>

<script>
import { getNotice } from '@/api';
export default {
  data() {
    return {
      notice: {},
    };
  },

  onLoad(opts) {
    this.init(opts.id);
  },

  methods: {
    init(id) {
      getNotice(id).then((res) => {
        const result = res.data || {};
        const content = result?.content?.replace(
          /<img/gi,
          '<img style="max-width:100%;height:auto;display:block"'
        );
        result.content = content;
        this.notice = result;
      });
    },
  },
};
</script>

<style lang="less" scoped>
.wrapper {
  .title {
    padding: 24rpx 0;
    font-size: 36rpx;
    text-align: center;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  .time {
    padding: 0 24rpx;
    font-size: 28rpx;
    text-align: right;
    color: #999;
  }
  .content {
    padding: 24rpx 24rpx calc(24rpx + env(safe-area-inset-bottom));
  }
}
</style>
